<template>
    <div id="my-three" ref="screenDom"></div>
  </template>
   
  <script setup>
  import * as THREE from "three";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  import { onMounted, ref, onBeforeUnmount } from "vue";
  // 导入dat.ui
// import * as dat from 'dat.gui';
   
  let screenDom = ref(null);
   
  onMounted(() => {
    // 1.创建场景
    const scene = new THREE.Scene();
   
    // 2.创建透视投影相机
    const camera = new THREE.PerspectiveCamera(
      50,
      screenDom.value.clientWidth / screenDom.value.clientHeight,
      0.1,
      1000
    );
    // 设置相机位置
    camera.position.set(5, 10, 10);
   
    // 3.创建WebGLRenderer渲染器
    const renderer = new THREE.WebGLRenderer();
    // 通过setSize()方法设置渲染的长宽
    renderer.setSize(screenDom.value.clientWidth, screenDom.value.clientHeight);
    // 设置渲染位置
    screenDom.value.appendChild(renderer.domElement);
   
    // 4.创建一个长、宽、高均为5个单位的立方体
    const geometry = new THREE.BoxGeometry(5, 5, 5);
   
    // 5.创建Lambert网格材质
    const materialBasic = new THREE.MeshLambertMaterial({
      color: 0x00ff00, // 绿色
      wireframe: true, //是否将几何体渲染为线框，默认值为false（即渲染为平面多边形）
    });
   
    // 6.创建一个网格模型对象
    const mesh = new THREE.Mesh(geometry, materialBasic); //网络模型对象Mesh
    // 把网格模型添加到三维场景
    scene.add(mesh);
    // 设置相机看向物体的方向(默认指向三维坐标系的原点)
    camera.lookAt(0, 0, 0);
    // 修改几何体位置
    mesh.position.set(3, 0, 0);
   
    // 7.创建光源
    const spotLight1 = new THREE.SpotLight(0xffffff, 1); //(光照颜色, 光照强度)
    // 设置光源位置
    spotLight1.position.set(10, 10, 10);
    const spotLight2 = new THREE.SpotLight(0xffffff, 1); //(光照颜色, 光照强度)
    // 设置光源位置
    spotLight2.position.set(-10, -10, -10);
    // 将光源添加到场景中
    scene.add(spotLight1, spotLight2);
   
    // 8.为了方便观察3D图像，添加三维坐标系对象
    const axes = new THREE.AxesHelper(8); // 坐标系轴长设置为8
    // 把三维坐标系 添加到场景中
    scene.add(axes);
   
    // 9.添加控制器
    let control = new OrbitControls(camera, renderer.domElement);
   
    // 11.开启gui控制面板
    // let gui = new dat.GUI()
    // gui
    //     .add(mesh.position, 'x')
    //     .min(0)
    //     .max(5)
    //     .step(0.1)
    //     .name("移动x轴")
    //     .onChange((value) => {
    //         console.log("值被修改了:", value);
    //     })
    //     .onFinishChange((value) => {
    //         console.log("完全停下来:", value);
    //     })
   
    // 结合场景和相机进行渲染,就是相机拍下此刻的场景(最后一步)
    // renderer.render(scene, camera);
   
    // 10.动态渲染
    function render() {
      //循环调用
      requestAnimationFrame(render);
      //渲染
      renderer.render(scene, camera);
    }
    render();
  });
  </script>
   
  <style lang="scss" scoped>
  #my-three {
    width: 100%;
    height: 100%;
  }
  </style>  